<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回调函数(callback)</title>
  <!-- 
  JavaScript 中的回调函数（Callback Function）说明
  回调函数是 JavaScript 中一个重要的概念，广泛应用于异步编程和事件处理。以下是关于回调函数的详细说明与总结：

  1. 定义
  - 回调函数：回调函数是一个作为参数传递给另一个函数的函数。当某个事件发生或某个操作完成时，这个回调函数会被调用。

  2. 特性
  - 作为参数传递：回调函数可以作为参数传递给其他函数，从而实现更灵活的代码结构。
    function greet(name) {
      console.log("你好, " + name + "!");
    }

    function processUserInput(callback) {
      const name = "张三";
      callback(name); // 调用回调函数
    }

    processUserInput(greet); // 输出: 你好, 张三!

  3. 应用场景
  - 异步编程：回调函数常用于处理异步操作的结果，例如网络请求、文件读取等。
    setTimeout(function() {
      console.log("这是一个延迟的回调函数");
    }, 1000); // 1秒后执行

  - 事件处理：在事件驱动编程中，回调函数用于处理用户的操作，例如点击按钮、提交表单等。
    document.getElementById("myButton").addEventListener("click", function() {
      console.log("按钮被点击了!");
    });

  4. 优势

  - 灵活性：回调函数使得代码更加灵活，可以在运行时决定执行哪个函数。
  - 解耦：通过回调函数，可以将逻辑分离，使得代码更易于维护和扩展。

  5. 注意事项
  - 回调地狱：过多的嵌套回调会导致代码难以阅读和维护，通常称为“回调地狱”。
    可以考虑使用 Promise 或 async/await 来解决这个问题。

    // 回调地狱示例
    doSomething(function(result) {
      doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
          console.log(finalResult);
        });
      });
    });

  - 错误处理：在使用回调函数时，需要注意错误处理机制，确保在出现错误时能够正确处理。
    function fetchData(callback) {
      // 模拟异步操作
      setTimeout(function() {
        const error = false; // 模拟错误
        if (error) {
          callback("发生错误", null);
        } else {
          callback(null, "数据加载成功");
        }
      }, 1000);
    }

    fetchData(function(err, data) {
      if (err) {
        console.error(err);
      } else {
        console.log(data);
      }
    });

  总结
  回调函数是 JavaScript 中非常重要的一个概念，广泛应用于异步编程和事件处理。
  -->
</head>
<body>

  <script>
    
    // 1. 什么是回调函数
    // 回调函数是一种通过函数参数传递给另一个函数的函数，该函数在适当的时候被调用。
    // 回调函数通常用于处理异步操作，例如在数据加载完成后执行某些操作。
    // 回调函数的定义
    function fetchData(callback) {
      // 模拟异步操作
      setTimeout(function() {
        const data = "数据加载成功";
        callback(data);
      }, 1000);
    }

    // 回调函数的使用
    fetchData(function(data) {
      console.log(data)
    })

    // 2. 回调函数的使用场景
    // 回调函数在 JavaScript 中非常常见，以下是一些常见的使用场景：
    // - 异步操作：在 JavaScript 中，许多操作都是异步的，例如网络请求、定时器等。
    //   可以使用回调函数来处理这些异步操作的结果。
    // - 事件处理：在 JavaScript 中，可以使用回调函数来处理事件，例如点击事件、键盘事件等。
    // - 高阶函数：在 JavaScript 中，高阶函数是指接受函数作为参数或返回函数的函数。
    //   回调函数可以作为高阶函数的参数传递，实现更灵活的编程模式。

    function request(url, callback) {
      // 模拟异步操作
      setTimeout(function() {
        const data = "数据加载成功";
        callback(data);
      }, 1000);
    }

    request("https://example.com/api/data", function(data) {
      console.log(data);
    });

    // 3. 回调函数的注意事项
    // - 回调函数可能会被多次调用，因此需要注意回调函数的执行逻辑。
    // - 回调函数可能会被异步调用，因此需要注意回调函数的执行顺序。
    // - 回调函数可能会抛出错误，因此需要注意错误处理机制。

  </script>
  
</body>
</html>